<template>
  <div id="accountMessage">
    <div class="homeTitle">{{id? '添加账号信息': '修改账户信息'}}</div>
    <div class="tablelist">
      <table>
        <tr> 
          <td>交易对手</td>
          <td><el-input v-model="data.full" placeholder="自动带出交易对手全称" disabled size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>业务类型</td>
          <td>
            <el-select v-model="data.type" placeholder="请选择" size="small">
              <el-option v-for="item in ywlxOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>账户名称</td>
          <td><el-input v-model="data.accountName" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>开户行</td>
          <td><el-input v-model="data.openBank" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>账号</td>
          <td><el-input v-model="data.number" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td><span class="bitian">*</span>支付系统行号</td>
          <td><el-input v-model="data.payment" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td>托管机构</td>
          <td><el-input v-model="data.trusteeship" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td>托管账户名称</td>
          <td><el-input v-model="data.trusteeshipAccountName" placeholder="请输入" size="small"></el-input></td>
        </tr>
        <tr> 
          <td>托管账号</td>
          <td><el-input v-model="data.managedAccount" placeholder="请输入" size="small"></el-input></td>
        </tr>
      </table>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
      <el-button type="primary" size="small" @click="$router.go(-1);">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "accountMessage",
  data() {
    return {
      ywlxOption: ['债券投资','债券回购','同业拆借','理财交易','其他资产交易'],
      data: {
        accountName: '',
        full: '',
        managedAccount: '',
        number: '',
        openBank: '',
        payment: '',
        trusteeship: '',
        trusteeshipAccountName: '',
        type: ''
      },
      id: '',
    };
  },
  mounted() {
    if(this.$route.query.data) {
      this.data = this.$route.query.data;      
    } else {
      this.id = this.$route.query.id;
      this.data.full = this.$route.query.full;
    }
  },
  methods: {
    submit() {
      if (!this.id) {
        this.xiugai();
      } else {
        this.add();
      }      
    },
    xiugai () {
      this.axios.post('counterparty/updateAcconutState',this.data)
        .then(({data})=> {
          this.$router.go(-1);
          this.$message({message: '修改成功',type: 'success'});
        })
    },
    add () {
      let obj = this.data;
      obj.counterpartyId = this.id;
      delete obj.full;
      let status = true;
      for (let k in obj) {
        if (k == 'trusteeship' || k == 'trusteeshipAccountName' || k == 'managedAccount') {
          continue;
        } else if (!obj[k]) {
          status = false;
        }
      }
      if (!status) {
        this.$message({message: '请您填写完整',type: 'warning'});
      } else {
        this.axios.post('counterparty/addOneAccount',{accountJson:[obj]})
          .then(({data})=> {
            this.$message({message: '添加成功',type: 'success'});
            this.$router.go(-1);
          })
      }
    }
  }
};
</script>

<style lang="scss">
#accountMessage {
  .tablelist {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 50px;
      tr {
        td {
          text-align: center;
          padding: 5px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          &:first-child {
            background: #343839;
            color: white;
            width: 30%;
            .bitian {
              color: red;
            }
          }
          &:last-child {
            background: #7a7a73;
            color: white;
            text-align: left;
          }
          .el-select {
            width: 100%;
          }
          &.fourS {
            // display: flex;
            // justify-content: space-between;
            .el-select {
              width: 18%;
            }
          }
          .el-tag {
            background: white;
            margin-right: 20px;
            margin-bottom: 10px;
            .el-icon-close {
              background-color: red;
              color: white;
            }
          }
        }
      }
    }
    tr {
      td {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        &:first-child {
          background: #343839;
          color: white;
          width: 30%;
          .bitian {
            color: red;
          }
        }
        &:last-child {
          background: #7a7a73;
          color: white;
          text-align: left;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
